<template>
	<view class="cl-push__wrap">
		<template v-for="item in list" :key="item.id">
			<cl-popup v-model="item.visible" :padding="0" :modal="false" :direction="item.position"
				background-color="transparent">
				<view class="cl-push" @click="jumpPath(item.path,item.payload.id)">
					<view class="cl-push_header">
						<view class="cl-push_header_flex">
							<view class="cl-push_header_icon">
								<image src="/static/logo-1.png" />
							</view>
							<view class="cl-push_header_title">
								消息通知
							</view>
						</view>
						<!-- <view class="cl-push_header_title">
							现在
						</view> -->
					</view>
					<view class="cl-push_container">
						<view class="cl-push_container_left">
							<view class="cl-push_container_title">
								{{item.payload.title}}
							</view>
							<view class="cl-push_container_contant">
								{{item.payload.content}}
							</view>
						</view>
					</view>
				</view>
			</cl-popup>
		</template>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref } from "vue";
	import { isFunction, last, has } from "lodash-es";
	import { useCool } from "/@/cool";
	export default defineComponent({
		name: "cl-push",

		setup() {
			let id = 0;
			const { refs, setRefs, router } = useCool();
			// 列表
			const list = ref<any[]>([]);

			// 打开
			function open(d : ClPush.Options) {
				// 默认
				const options = {
					id: id++,
					visible: false,
					title: d?.title,
					content: d?.content,
					duration: 5000,
					payload: d?.payload,
					position: "top",
					clear: false,
					path: d?.path
				};
				// 是否清除之前的
				if (options.clear) {
					list.value = [options];
				} else {
					list.value.push(options);
				}

				setTimeout(() => {
					create(last(list.value));
				}, 50);

			}
			// 跳转页面
			function jumpPath(path:string,id:string) {
				console.log(path,"123123")
				router.push(path+'?id='+id)
			}
			// 关闭
			function close(item : any) {
				// 清空计时器
				clearTimeout(item.timer);
				item.visible = false;

				// 关闭回调
				if (isFunction(item.onClose)) {
					item.onClose();
				}

				setTimeout(() => {
					item.closed = true;
				}, 300);
			}

			// 创建
			function create(item : any) {
				const { duration } = item || {};

				if (duration > 0) {
					item.visible = true;

					item.timer = setTimeout(() => {
						close(item);
					}, duration);
				}
			}

			return {
				list,
				open,
				close,
				create,
				jumpPath
			};
		},
	});
</script>